<template>
  <div class="box">
    <el-tabs v-model="activeName" @tab-click="yshandleClick">
      <el-tab-pane label="应收账单" name="first">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="billForm"
                :model="billForm"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="账单名称">
                  <el-input
                    v-model="billForm.checkName"
                    placeholder="请输入账单名称"
                    style="width: 286px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="时间范围" style="width: 600px">
                  <div class="flex">
                    <el-radio v-model="billForm.timeType" :label="1"
                      >出账时间</el-radio
                    >
                    <el-radio v-model="billForm.timeType" :label="2"
                      >收款时间</el-radio
                    >
                    <el-date-picker
                      v-model="Time"
                      type="daterange"
                      range-separator="至"
                      @change="billDateChange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </div>
                </el-form-item>
                <el-form-item label="账单类型">
                  <el-select
                    v-model="billForm.checkType"
                    placeholder="请选择账单类型"
                    style="width: 286px"
                  >
                    <el-option label="客户" value="客户"></el-option>
                    <el-option label="承包区" value="承包区"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="billSearch">查询</el-button>
                  <el-button @click="billClear">重置</el-button>
                </el-form-item>

                <el-form-item label="账单对象">
                  <el-input
                    v-model="billForm.checkObjectName"
                    placeholder="请选择账单对象"
                    style="width: 286px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="收款状态">
                  <el-select
                    v-model="billForm.collectType"
                    placeholder="请选择收款状态"
                    style="width: 286px"
                  >
                    <el-option label="未收款" value="未收款"></el-option>
                    <el-option label="已收款" value="已收款"></el-option>
                    <el-option label="部分收款" value="部分收款"></el-option>
                    <el-option label="溢收款" value="溢收款"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="结算科目">
                  <el-cascader
                    v-model="billForm.settleSubjectId"
                    :options="options"
                    @change="yshandleChange"
                    style="width: 286px"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="数据来源">
                  <el-select
                    v-model="billForm.dataSource"
                    placeholder="请选择数据来源"
                    style="width: 286px"
                  >
                    <el-option label="系统" value="系统"></el-option>
                    <el-option label="手工" value="手工"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所属业务员">
                  <el-input
                    v-model="billForm.payer"
                    placeholder="请选择所属业务员"
                    style="width: 286px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="单号">
                  <el-input
                    v-model="billForm.codes"
                    placeholder="请输入单号"
                    style="width: 286px"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div>当前页共{{ billTotal }}项</div>
          </el-col>
          <el-col :span="10">
            <div>
              <span style="color: red; font-size: 18px"
                >温馨提示: 已收金额不为0的账单无法删除,如需删除请先反核销
                操作收款登记</span
              >
              <el-button type="primary">新增</el-button>
              <el-button type="primary">删除</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <el-table
                ref="multipleTable"
                :data="billTableData"
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ textAlign: 'center' }"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="yfhandleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column
                  prop="disbursementTime"
                  label="出账时间"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="账单名称"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="checkName"
                  label="账单对象名称"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="120">
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间" width="120">
                </el-table-column>
                <el-table-column prop="checkType" label="账单类型" width="120">
                </el-table-column>
                <el-table-column prop="totalTicket" label="总票数" width="120">
                </el-table-column>
                <el-table-column
                  prop="totalSettle"
                  label="总结算重量"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="networkSettleSubject.title"
                  label="结算科目"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="checkMoney" label="账单金额" width="120">
                </el-table-column>
                <el-table-column
                  prop="collectMoney"
                  label="已收金额"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="uncollectMoney"
                  label="未收款金额"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="damageMoney"
                  label="折损金额"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="collectType"
                  label="收款状态"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="collectPeople"
                  label="收款人"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="collectTime"
                  label="收款时间"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="payer" label="出账人" width="120">
                </el-table-column>
                <el-table-column prop="dataSource" label="数据来源" width="120">
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="120">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="操作"
                  width="120"
                  fixed="right"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: end">
          <el-pagination
            @size-change="yfhandleSizeChange"
            @current-change="yfhandleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="billTotal"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="应付账单" name="second">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="payForm"
                :model="payForm"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="账单名称">
                  <el-input
                    v-model="payForm.checkName"
                    placeholder="请输入账单名称"
                    style="width: 286px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="时间范围">
                  <el-date-picker
                    v-model="Time"
                    type="daterange"
                    range-separator="至"
                    @change="payDateChange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="账单类型">
                  <el-select
                    v-model="payForm.checkType"
                    placeholder="请选择账单类型"
                    style="width: 286px"
                  >
                    <el-option label="客户" value="客户"></el-option>
                    <el-option label="承包区" value="承包区"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="账单对象">
                  <el-input
                    v-model="payForm.checkObjectName"
                    placeholder="请选择账单对象"
                    style="width: 286px"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="paySearch">查询</el-button>
                  <el-button @click="payClear">重置</el-button>
                </el-form-item>

                <el-form-item label="付款状态">
                  <el-select
                    v-model="payForm.payStatus"
                    placeholder="请选择收款状态"
                    style="width: 286px"
                  >
                    <el-option label="未收款" value="未收款"></el-option>
                    <el-option label="已收款" value="已收款"></el-option>
                    <el-option label="部分收款" value="部分收款"></el-option>
                    <el-option label="溢收款" value="溢收款"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="结算科目">
                  <el-cascader
                    v-model="payForm.settleSubjectId"
                    :options="options"
                    @change="yfhandleChange"
                    style="width: 286px"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="数据来源">
                  <el-select
                    v-model="payForm.dataSource"
                    placeholder="请选择数据来源"
                    style="width: 286px"
                  >
                    <el-option label="系统" value="系统"></el-option>
                    <el-option label="手工" value="手工"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div>当前页共{{ payTotal }}项</div>
          </el-col>
          <el-col :span="10">
            <div>
              <span style="color: red; font-size: 18px"
                >温馨提示: 已收金额不为0的账单无法删除，如需删除请先反核销
                操作收款登记)</span
              >
              <el-button type="primary">新增</el-button>
              <el-button type="primary">删除</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <el-table
                ref="multipleTable"
                :data="payTableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="yshandleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column
                  prop="disbursementTime"
                  label="出账时间"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="checkName"
                  label="账单名称"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="checkObjectName"
                  label="账单对象名称"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="checkType" label="账单类型" width="120">
                </el-table-column>
                <el-table-column prop="totalTicket" label="总票数" width="120">
                </el-table-column>
                <el-table-column
                  prop="totalSettle"
                  label="总结算重量"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="networkSettleSubject.title"
                  label="结算科目"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="checkMoney" label="账单金额" width="120">
                </el-table-column>
                <el-table-column prop="payMoney" label="已付金额" width="120">
                </el-table-column>
                <el-table-column
                  prop="unpayMoney"
                  label="未付款金额"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="payStatus" label="付款状态" width="120">
                </el-table-column>
                <el-table-column prop="payPeople" label="付款人" width="120">
                </el-table-column>
                <el-table-column prop="payTime" label="付款时间" width="120">
                </el-table-column>
                <el-table-column prop="payer" label="出账人" width="120">
                </el-table-column>
                <el-table-column prop="dataSource" label="数据来源" width="120">
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="120">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="操作"
                  width="120"
                  fixed="right"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: end">
          <el-pagination
            @size-change="yshandleSizeChange"
            @current-change="yshandleCurrentChange"
            :current-page="currentPage2"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="payTotal"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="手工账单录入" name="third">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="handForm"
                :model="handForm"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="所属网点">
                  <el-select
                    v-model="handForm.networkNameId"
                    placeholder="请选择所属网点"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="item in networkList"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                  <el-date-picker
                    v-model="Time"
                    type="daterange"
                    range-separator="至"
                    @change="handDateChange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="收付类型">
                  <el-select
                    v-model="handForm.closedPayType"
                    placeholder="请选择收付类型"
                    style="width: 286px"
                  >
                    <el-option label="应收" value="应收"></el-option>
                    <el-option label="应付" value="应付"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="对象类型">
                  <el-select
                    v-model="handForm.objectType"
                    placeholder="请选择活动区域"
                    style="width: 286px"
                  >
                    <el-option label="客户" value="客户"></el-option>
                    <el-option label="承包区" value="承包区"></el-option>
                    <el-option label="业务员" value="业务员"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="handSearch">查询</el-button>
                  <el-button @click="handClear">重置</el-button>
                </el-form-item>
                <el-form-item label="对象名称">
                  <el-input
                    v-model="handForm.objectName"
                    placeholder="请选择结算对象"
                    style="width: 286px"
                  ></el-input>
                </el-form-item>
                <el-form-item label="结算科目">
                  <el-cascader
                    v-model="handForm.settleSubjectId"
                    :options="options"
                    @change="handhandleChange"
                    style="width: 286px"
                  ></el-cascader>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div>当前页共{{handTotal}}项</div>
          </el-col>
          <el-col :span="10">
            <div>
              <span style="color: red; font-size: 18px"
                >温馨提示: 已收金额不为0的账单无法删除，如需删除请先反核销
                操作收款登记)</span
              >
              <el-button type="primary">新增</el-button>
              <el-button type="primary">删除</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <el-table
                ref="multipleTable"
                :data="handTableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="networkName.networkName" label="所属网点" width="120">
                </el-table-column>
                <el-table-column
                  prop="objectType"
                  label="对象类型"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="objectName" label="对象名称" width="120">
                </el-table-column>
                <el-table-column prop="objectCode" label="对象编码" width="120">
                </el-table-column>
                <el-table-column prop="networkSettleSubject.title" label="结算科目" width="120">
                </el-table-column>
                <el-table-column prop="amount" label="金额" width="120">
                </el-table-column>
                <el-table-column prop="checkStatus" label="账单状态" width="120">
                </el-table-column>
                <el-table-column prop="closedPayType" label="收付类型" width="120">
                </el-table-column>
                <el-table-column prop="createBy" label="创建人" width="120">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="120">
                </el-table-column>
                <el-table-column  label="操作" width="120" fixed="right">
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage3"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="handTotal"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getOutletsList,
  billPayableList,
  accountReceivableSearch,
  getnetworkList,
  getPayableList,
  billPayableSearch,
  handworkBillList,
  handworkBillSearch
} from "@/api/dashboard";

export default {
  data() {
    return {
      activeName: "third",
      // 应收账单
      billForm: {
        checkName: "",
        timeType: 1,
        startTime: "",
        endTime: "",
        checkType: "",
        checkObjectName: "",
        collectType: "",
        settleSubjectId: "",
        dataSource: "",
        payer: "",
        codes: "",
      },
      // 应付账单
      payForm: {
        checkName: "",
        startTime: "",
        endTime: "",
        checkType: "",
        checkObjectName: "",
        payStatus: "",
        settleSubjectId: "",
        dataSource: "",
      },
      Time: "",
      options: [],
      radio: 1,
      value1: "",
      handForm: {
        networkNameId: "",
        startTime: "",
        endTime: "",
        closedPayType: "",
        objectType: "",
        objectName: '',
        settleSubjectId: "",
      },
      // 收账单
      billTableData: [],
      // 付账单
      payTableData: [],
      // 手工账单录入
      handTableData: [],

      YsSettleSubjectList: [],
      tableData: [],
      currentPage1: 1,
      currentPage2: 1,
      currentPage3: 1,

      networkList: [],
      billPages: {
        pageNum: 1,
        pageSize: 10,
      },
      billTotal: 0,

      payPages: {
        pageNum: 1,
        pageSize: 10,
      },
      payTotal: 0,

       handPages: {
        pageNum: 1,
        pageSize: 10,
      },
      handTotal: 0,
    };
  },
  created() {
    this.getBillTableData();
    this.getPayTableData();
    this.getHandTableData()
    this.getOutLet();
  },
  mounted() {
    this.getYSZBJS();
  },
  methods: {
    yshandleClick(tab, event) {
      console.log(tab, event);
    },
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code == 200) {
          this.networkList = res.data;
        }
      });
    },
    // 显示应收结算科目
    getYSZBJS() {
      getnetworkList().then((res) => {
        if (res.code == 200) {
          this.YsSettleSubjectList = res.data;
          // 在组件挂载时设置 options 数组
          this.options = this.parseOptions(this.YsSettleSubjectList);
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
    // 结算科目
    yfhandleChange(value) {
      console.log(value);
      this.billForm.settleSubjectId = value[1];
    },
    yshandleChange(value) {
      console.log(value);
      this.payForm.settleSubjectId = value[1];
    },
    handhandleChange(value) {
      console.log(value);
      this.handForm.settleSubjectId = value[1];
    },
    // 替换数据
    parseOptions(data) {
      // 将原始数据结构转换为级联选择器需要的结构
      return data.map((item) => {
        const newItem = {
          value: item.id,
          label: item.title,
        };

        if (item.networkSettleSubjects && item.networkSettleSubjects.length > 0) {
          newItem.children = this.parseOptions(item.networkSettleSubjects);
        }

        return newItem;
      });
    },
    // 获取应收账单表格数据
    getBillTableData() {
      billPayableList(this.billPages.pageNum, this.billPages.pageSize).then(
        (res) => {
          if (res.code == 200) {
            this.billTableData = res.data.data;
            this.billTotal = res.data.total;
            this.billPages.pageSize = res.data.pages;
          }
        }
      );
    },

    // 获取应付账单表格数据
    getPayTableData() {
      getPayableList(this.payPages.pageNum, this.payPages.pageSize).then(
        (res) => {
          if (res.code == 200) {
            this.payTableData = res.data.data;
            this.payTotal = res.data.total;
            this.payPages.pageSize = res.data.pages;
          }
        }
      );
    },

    // 获取手工账单表格数据
    getHandTableData(){
handworkBillList(this.handPages.pageNum, this.handPages.pageSize).then(
        (res) => {
          if (res.code == 200) {
            this.handTableData = res.data.data;
            this.handTotal = res.data.total;
            this.handPages.pageSize = res.data.pages;
          }
        }
      );
    },
    // 日期转换
    billDateChange(value) {
      this.billForm.startTime = value[0];
      this.billForm.endTime = value[1];
    },
    // 应付款日期转换
    payDateChange(value) {
      this.payForm.startTime = value[0];
      this.payForm.endTime = value[1];
    },
    // 手工账单日期转换
    handDateChange(value) {
      this.handForm.startTime = value[0];
      this.handForm.endTime = value[1];
    },
    // 应收账单查询
    billSearch() {
      for (const key in this.billForm) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.billForm[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.billForm[key];
        }
      }
      console.log(this.billForm, "this.billForm");
      accountReceivableSearch(this.billForm).then((res) => {
        if (res.code == 200) {
          this.billTableData = res.data.data;
          this.billTotal = res.data.total;
          this.billPages.pageSize = res.data.pages;
        }
      });
    },

    // 应收账单查询
    paySearch() {
      for (const key in this.payForm) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.payForm[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.payForm[key];
        }
      }
      billPayableSearch(this.payForm).then((res) => {
        if (res.code == 200) {
          this.payTableData = res.data.data;
          this.payTotal = res.data.total;
          this.payPages.pageSize = res.data.pages;
        }
      });
    },

     // 应收账单查询
    handSearch() {
      for (const key in this.handForm) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.handForm[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.handForm[key];
        }
      }
      handworkBillSearch(this.handForm).then((res) => {
        if (res.code == 200) {
          this.handTableData = res.data.data;
          this.handTotal = res.data.total;
          this.handPages.pageSize = res.data.pages;
        }
      });
    },

    // 应收账单重置
    billClear() {
      this.billForm = {};
      this.getPayTableData();
    },

    // 应付账单重置
    payClear() {
      this.payForm = {};
      this.getBillTableData();
    },

    // 应付账单重置
    handClear() {
      this.handForm = {};
      this.getHandTableData();
    },
    yfhandleSizeChange(val) {
      this.billPages.pageSize = val;
      this.getBillTableData();

      console.log(`每页 ${val} 条`);
    },
    yfhandleCurrentChange(val) {
      this.billPages.pageNum = val;
      this.getBillTableData();
      console.log(`当前页: ${val}`);
    },
    yfhandleSelectionChange(val) {
      // this.multipleSelection = val;
    },
    yshandleSizeChange(val) {
      this.billPages.pageSize = val;
      this.getBillTableData();

      console.log(`每页 ${val} 条`);
    },
    yshandleCurrentChange(val) {
      this.billPages.pageNum = val;
      this.getBillTableData();
      console.log(`当前页: ${val}`);
    },
    yshandleSelectionChange(val) {
      // this.multipleSelection = val;
    },

    handleSizeChange(val) {
      this.handPages.pageSize = val;
      this.getHandTableData();

      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.handPages.pageNum = val;
      this.getHandTableData();
      console.log(`当前页: ${val}`);
    },
    handleSelectionChange(val) {
      // this.multipleSelection = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
